<template>
  <div>
    <n-card title="通知公告">
      <n-list hoverable>
        <n-list-item v-for="item in notifications" :key="item.id">
          <n-thing>
            <template #avatar>
              <n-icon size="32" color="#2080f0">
                <NotificationsOutline />
              </n-icon>
            </template>
            <template #header>
              {{ item.title }}
            </template>
            <template #header-extra>
              <n-tag v-if="item.type === 'SYSTEM'" type="info" size="small">系统</n-tag>
              <n-tag v-else-if="item.type === 'ACTIVITY'" type="success" size="small">活动</n-tag>
              <n-tag v-else type="warning" size="small">需求</n-tag>
            </template>
            <template #description>
              {{ formatDate(item.createTime) }}
            </template>
            {{ item.content }}
          </n-thing>
        </n-list-item>
      </n-list>

      <n-pagination
        v-model:page="pagination.page"
        :page-count="pagination.pageCount"
        style="margin-top: 20px; justify-content: center;"
        @update:page="loadNotifications"
      />
    </n-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getNotificationList } from '@/api/notification'
import { NotificationsOutline } from '@vicons/ionicons5'

const notifications = ref([])
const pagination = reactive({
  page: 1,
  pageSize: 10,
  pageCount: 1
})

const formatDate = (dateStr) => {
  if (!dateStr) return ''
  return new Date(dateStr).toLocaleString('zh-CN')
}

const loadNotifications = async () => {
  try {
    const res = await getNotificationList({
      page: pagination.page,
      size: pagination.pageSize
    })
    notifications.value = res.data.records || []
    pagination.pageCount = res.data.pages || 1
  } catch (error) {
    console.error('加载通知失败:', error)
  }
}

onMounted(() => {
  loadNotifications()
})
</script>

